.order-status__item {
	display: inline-flex;
	padding: 0 12px;
	line-height: 32px;
	background: var( --color-neutral-10 );
	border-radius: 2px;

	&.is-processing {
		background: var( --color-success-20 );
		color: var( --color-success-90 );

		span + span {
			border-color: var( --color-success );
		}
	}

	&.is-failed {
		background: var( --color-error-20 );
		color: var( --color-error-90 );

		span + span {
			border-color: var( --color-error );
		}
	}

	&.is-cancelled,
	&.is-refunded,
	&.is-completed {
		background: var( --color-neutral-0 );
		color: var( --color-neutral-70 );

		span + span {
			border-color: var( --color-neutral-10 );
		}
	}

	&.is-on-hold {
		background: var( --color-warning-5 );
		color: var( --color-warning-dark );

		span + span {
			border-color: var( --color-warning );
		}
	}

	span + span {
		margin-left: 12px;
		padding-left: 12px;
		border-left: 1px solid var( --color-neutral-light );
	}
}
